<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>清真货架</title>
    <link rel="stylesheet" href="/plugin/bootstrap-3.3.7/css/bootstrap.css">
    <link rel="stylesheet" href="/plugin/AdminLTE-2.4-rc/css/AdminLTE.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_463894_zqdg0oyd9yynwmi.css">
    <script src="/plugin/jquery-3.2.1/jquery.js"></script>
    <script src="/plugin/bootstrap-3.3.7/js/bootstrap.js"></script>
    <script src="/plugin/moment-2.19.1/moment.js"></script>
    <script src="/plugin/moment-2.19.1/zh-cn.js"></script>
    <style>



    </style>

</head>
<body class="container">

    <div style="margin: 50px auto 20px">
        <img width="270" height="100" src="/img/qzhj/logo2.png" class="center-block">
        <div class="input-group input-group-lg" style="max-width: 540px;margin: 10px auto">
            <input id="searchInput" type="text" class="form-control">
            <span class="input-group-btn ">
                <button class="btn btn-success" onclick="search()" type="button">清真一下</button>
                <#--<button onclick="location.href='/qzhj/prod/add'" type="button" class="btn btn-warning">举报</button>-->
            </span>
        </div>
    </div>


    <div class="row" style="margin: 10px auto;max-width: 800px;border: solid 1px #ccc;border-radius: 4px">
        <div class="col-sm-4 hidden-sm hidden-md hidden-lg" style="padding: 5px 0;margin: 0;background-color: #f5f5f5;text-align: center">
            <a href="/qzhj/prod/add" style="display: inline-block;margin: 0 5px;color: #999">
                <span class="iconfont icon-puguangtai" style="display: block;font-size: 20px;"></span>
                <span style="font-size: 12px">曝光商品</span>
            </a>
            <a href="https://lvhu.co/?/article/49" target="_blank" style="display: inline-block;margin: 0 5px;color: #999">
                <span class="iconfont icon-jiaruwomen" style="display: block;font-size: 20px;"></span>
                <span style="font-size: 12px">加入我们</span>
            </a>
            <a href="https://lvhu.co/" target="_blank" style="display: inline-block;margin: 0 5px;color: #999">
                <#--<span class="" style="display: block;background: url('/img/qzhj/lh.png');background-size: 56px 40px;height: 40px;width: 56px"></span>-->
                <span class="iconfont icon-jinru" style="display: block;font-size: 20px;"></span>
                <span style="font-size: 12px">进入绿乎</span>
            </a>
            <a href="https://lvhu.co/" target="_blank" style="display: inline-block;margin: 0 5px;color: #999">
            <#--<span class="" style="display: block;background: url('/img/qzhj/lh.png');background-size: 56px 40px;height: 40px;width: 56px"></span>-->
                <span class="iconfont icon-weibo" style="display: block;font-size: 20px;"></span>
                <span style="font-size: 12px">关注微博</span>
            </a>
        </div>

        <div class="col-sm-8" id="searchResultDiv" style="padding: 20px;">
            <#--搜索结果区-->


        </div>
        <div class="col-sm-4 visible-sm-block visible-md-block visible-lg-block" style="border-left: solid 1px #ccc;padding: 20px;">
            <#--右侧功能区-->
            <div style="text-align: center">暂无公告</div>
            <hr>
            <div style="text-align: center">
                <button onclick="location.href='/qzhj/prod/add'" type="button" class="btn btn-success">举&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;报</button>
                &nbsp;
                <button type="button" class="btn btn-success" disabled>关注微博</button><br><br>
                <a href="https://lvhu.co/" target="_blank" class="btn btn-success">绿&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;乎</a>
                &nbsp;
                <a href="https://lvhu.co/?/article/49" target="_blank" class="btn btn-success">加入我们</a>
            </div>
            <hr>
            <div>
                这里不知道放点啥
            </div>
        </div>
    </div>


<script>
    let pageNum = 1;
    let pageSize = 10;


    function toPage(page) {
        pageNum = page;
        search();
    }


    function search() {
        $.post("/qzhj/prod/search", {keyword: $("#searchInput").val(),start:pageNum,length:pageSize}, function (d) {
            parseSearchZoneData(d);
        },"json");
    }



    function parseSearchZoneData(data) {
        if (!data)
            return;
        let d = data.data;

        if (!d || !(d instanceof Array))
            return;
        if (d.length === 0) {
            $("#searchResultDiv").empty();
            return;
        }


        let str = "";
        for (let i = 0,temp; i < d.length; ++i) {
            temp = d[i];
//            str += '<a href="/qzhj/prod/info?prodId=' + temp.id + '" target="_blank">' +
//                    '<strong><span class="glyphicon glyphicon-tags"></span> ' + temp.title + '</strong' +
//                    '</a>';
//            str += '<div href="#" class="pull-right"><span class="glyphicon glyphicon-map-marker"></span> 无</div>';
//            str += '<p class="text-muted">';
//            str += temp.content;
//            str += '</p><hr>';

            //<div class="post">
            //<div class="user-block">
            //<span class="glyphicon glyphicon-ok-circle" style="font-size: 30px; float: left; margin-top: 5px"></span>
            //<span class="username">
            //<a href="#">清真红薯</a>
            //<a href="#" class="pull-right btn-box-tool"><span class="glyphicon glyphicon-time">10分钟前</span></a>
            //</span>
            //<span class="description"><span class="glyphicon glyphicon-map-marker"></span>北京市 海淀区</span>
            //</div>
            //<p>
            //绿色的红薯，谁吃呢？
            //</p>
            //</div>
            str += '<div class="post">';
            str += '<div class="user-block">';
            str += '<span class="iconfont icon-chanpin" style="font-size: 30px; float: left;padding-left: 5px"></span>';
            str += '<span class="username">';
            str += '<a  href="/qzhj/prod/info?prodId=' + temp.id + '" >' + temp.title + '</a>';// target="_blank"
            str += '<a href="#" class="pull-right btn-box-tool"><span class="glyphicon glyphicon-time"></span> ' + moment(temp.time).startOf('hour').fromNow()  + '</a>';
            str += '</span>';
            if (!temp.area)
                temp.area = "未记录地区";
            str += '<span class="description"><span class="glyphicon glyphicon-map-marker"></span>' + temp.area + '</span>';
            str += '</div>';
            str += '<p>' + temp.content + '</p>';
            str += '</div>';
        }
        str = str.substring(0,str.length - 4);
        // 分页

        let pageCount;// 总页数
        pageCount = parseInt(data.total / pageSize);
        if (data.total % 10 !== 0) {
            ++pageCount;
        }


        let f = getPageList(data.page, pageCount, 10);


        str += '<nav>';
        str += '<ul class="pagination">';

        if (data.page === 1)
            str += '<li class="disabled"><a href="javascript:void(0)"><span>&laquo;</span></a></li>';
        else
            str += '<li><a href="#"><span>&laquo;</span></a></li>';

        for (let i = 0; i < f.length; ++i) {
            if (data.page === f[i]) {
                str += '<li class="active">';
                str += '<a href="javascript:void(0)">';
            } else {
                str += '<li>';
                str += '<a href="javascript:toPage(' + f[i] + ')">';
            }
            str += f[i];
            str += '</a>';
            str += '</li>';
        }
        if (data.page === pageCount)
            str += '<li class="disabled"><a href="javascript:void(0)"><span>&raquo;</span></a></li>';
        else
            str += '<li><a href="#"><span>&raquo;</span></a></li>';
        str += '</ul>';
        str += '</nav>';

        let $searchResultDiv = $("#searchResultDiv");
        $searchResultDiv.empty();
        $searchResultDiv.append(str);
    }


    search();

    //console.log(getPageList(5, 100, 10, 5));

    /**
     * 算出应该显示哪些页码
     *
     * @param currentPage 当前页
     * @param pageCount 总页数
     * @param pageNum 页码数量
     * @return [] 页码列表
     */
    function getPageList(currentPage = 1, pageCount = 0, pageNum = 6) {
        if (pageNum < 3  || currentPage < 1 || pageCount < 1 || currentPage > pageCount)
            return [];

        if (pageCount === 0)
            return [];
        if (pageCount === 1)
            return [1];
        if (pageCount === 2)
            return [1, 2];

        // 计算左右各取几个
        let left = Math.ceil((pageNum - 1) / 2);
        let right = Math.floor((pageNum - 1) / 2);

        // 左边数量够不够，从0开始，取pageNum个数，到pageCount为止
        left = currentPage - left;
        if (left < 1)
            return getNumber(1, pageCount, pageNum);

        // 右边数量够不够，从到pageCount为止开始，取pageNum个数，0
        right = currentPage + right;
        if (right > pageCount)
            return getNumber(pageCount - pageNum + 1, pageCount, pageNum);

        // 左右都足够
        return getNumber(left, right, pageNum);
        /**
         * 取数
         * @param start 从多少开始
         * @param end 到多少
         * @param num 取几个
         */
        function getNumber(start, end, num) {
            if (start < 1)
                start = 1;
            let r = [];
            for (let i = 0,temp; i < num; ++i) {
                temp = start + i;
                r.push(temp);
                if (temp >= end)
                    break;
            }
            return r;
        }
    }
</script>

</body>
</html>